<template>
  <div class="product">
    <h3>标题：{{ title }}</h3>
    <p>价格: {{ price }}</p>
    <p v-color="color">描述: {{ desc }}</p>
    <p>msg: {{ msg }}</p>
    <button @click="cut">砍一刀</button>
  </div>
</template>

<script>
export default {
    name: 'MyGoods',

    // 只是相当于声明了要哪些数据
    // 相当于只是儿子伸手要了
    // props: ['title', 'price', 'desc']
    // props是没有校验的，也就是可以传可以不传

    props: {

      title: {
        // 必须要传
        required: true
      },

      price: {
        required: true
      },

      desc: {
        required: true,
        // 设置了必传，默认值就没什么意义
        // 因为默认值本来就是你传了就用你传的，你没传就用默认值
        // 也就是意味着就是可以不要传
        // 但是你都限制了必传，所以没什么意义
        default: '我是默认值'
      }
    },


    data() {
      return {
        color: 'orange',
        msg: '我是goods的msg'
      }
    },

    methods: {
      cut () {
        // 不允许修改props里定义的数据
        // 因为它这是它爹的数据，不允许直接改
        // this.price -= 0.1

        console.log(this.msg)

        // 在JS中，访问数据和方法前面要加this
        this.$emit('changePrice', 2, this.title)
      },

      test () {
        console.log('我是子组件里的方法哟！')
      }
    }
};
</script>

<style scoped>
.product {
  width: 400px;
  border: 3px solid #000;
  border-radius: 5px;
  margin: 10px;
  padding: 0 20px;
}
</style>